<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec = "http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<!-- ========================= HEADER ========================= -->
<header class="section-header" th:fragment="header">

    <section class="header-main shadow-sm">
        <div class="container">
            <div class="row-sm align-items-center">
                <div class="col-md-4-24 col-sm-3">
                    <a class="navbar-brand" href="/index">
                        <img class="logo" src="/images/logos/logo-alibaba.png" alt="alibaba style e-commerce html template file" title="alibaba e-commerce html css theme">
                    </a>
                </div>
                <div class="col-md-12-24 col-sm-8">
                    <form method="get" action="/commodity/Search" class="py-1">
                        <div class="input-group w-100">
                            <select class="custom-select"  name="commType">
                                <option value="所有">所有</option>
                                <option value="食品生鲜">食品生鲜</option>
                                <option value="智能数码">智能数码</option>
                                <option value="美妆个护">美妆个护</option>
                                <option value="母婴玩具">母婴玩具</option>
                                <option value="运动户外">运动户外</option>
                                <option value="生活家电">生活家电</option>
                                <option value="医药健康">医药健康</option>
                                <option value="珠宝艺术">珠宝艺术</option>
                                <option value="图书杂志">图书杂志</option>
                            </select>
                            <input type="text" name="searchString" class="form-control" style="width:50%;" placeholder="搜索...">
                            <div class="input-group-append">
                                <button class="btn btn-warning" type="submit">
                                    <i class="fa fa-search"></i> 搜索
                                </button>
                            </div>
                        </div>
                    </form> <!-- search-wrap .end// -->
                </div> <!-- col.// -->
                <div class="col-md-8-24 col-sm-12">
                    <div class="widgets-wrap float-right row no-gutters py-1">
                        <div class="col-auto">
                            <div class="widget-header dropdown" sec:authorize="isAnonymous()" >
                                <a href="#" data-toggle="dropdown" data-offset="20,10">
                                    <div class="icontext">
                                        <div class="icon-wrap"><i class="text-warning icon-sm fa fa-user"></i></div>
                                        <div class="text-wrap text-dark">
                                            登陆账号&nbsp&nbsp<i class="fa fa-caret-down"></i>
                                        </div>
                                    </div>
                                </a>
                                <div class="dropdown-menu">
                                    <form method="post" action="/index" class="px-4 py-3">
                                        <div class="form-group">
                                            <label>手机号</label>
                                            <input type="text" name="username" class="form-control" placeholder="手机号">
                                        </div>
                                        <div class="form-group">
                                            <label>密码</label>
                                            <input type="password" name="password" class="form-control" placeholder="密码">
                                        </div>
                                        <button type="submit" class="btn btn-primary">登录</button>
                                    </form>
                                    <hr class="dropdown-divider">
                                    <a class="dropdown-item" href="/user/register">没有账号？点此注册</a>
                                    <a class="dropdown-item" href="#">忘记密码？</a>
                                </div> <!--  dropdown-menu .// -->
                            </div>  <!-- widget-header .// -->
                            <div class="widget-header dropdown" sec:authorize="isAuthenticated()" >
                                <a href="#" data-toggle="dropdown" data-offset="20,10">
                                    <div class="icontext">
                                        <div class="icon-wrap"><i class="text-warning icon-sm fa fa-user"></i></div>
                                        <div class="text-wrap text-dark" sec:authentication="">
                                            <span th:text="${session.nickname}">您已登陆</span>&nbsp;&nbsp;<i class="fa fa-caret-down"></i>
                                        </div>
                                    </div>
                                </a>
                                <div class="dropdown-menu">
                                    <a class="dropdown-item" href="/userCenter">我的个人中心</a>
                                    <a class="dropdown-item" href="/userCenter/myOrders?page=1">我的订单</a>
                                    <hr class="dropdown-divider">
                                    <a class="dropdown-item" href="/logout">注销登陆</a>
                                </div> <!--  dropdown-menu .// -->
                            </div>  <!-- widget-header .// -->
                        </div> <!-- col.// -->
                        <div class="col-auto">
                            <a href="/shoppingCart" class="widget-header">
                                <div class="icontext">
                                    <div class="icon-wrap"><i class="text-warning icon-sm fa fa-shopping-cart"></i></div>
                                    <div class="text-wrap text-dark">
                                        我的购物车
                                    </div>
                                </div>
                            </a>
                        </div> <!-- col.// -->
                        <!--注释掉愿望单-->
                        <!--<div class="col-auto">-->
                            <!--<a href="#" class="widget-header">-->
                                <!--<div class="icontext">-->
                                    <!--<div class="icon-wrap"><i class="text-warning icon-sm  fa fa-heart"></i></div>-->
                                    <!--<div class="text-wrap text-dark">-->
                                        <!--<span class="small round badge badge-secondary">0</span>-->
                                        <!--<div>Favorites</div>-->
                                    <!--</div>-->
                                <!--</div>-->
                            <!--</a>-->
                        <!--</div> -->

                    </div> <!-- widgets-wrap.// row.// -->
                </div> <!-- col.// -->
            </div> <!-- row.// -->
        </div> <!-- container.// -->
    </section> <!-- header-main .// -->
</header> <!-- section-header.// -->
<!-- ========================= HEADER END ========================= -->


<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-secondary" th:fragment="footer">
    <div class="container">
        <section class="footer-top padding-top">
            <div class="row">
                <aside class="col-sm-3 col-md-3 white">
                    <h5 class="title">用户服务</h5>
                    <ul class="list-unstyled">
                        <li> <a href="#"> 帮助中心</a></li>
                        <li> <a href="#"> 退款服务 </a></li>
                        <li> <a href="#"> 条款和政策</a></li>
                        <li> <a href="#"> 建议</a></li>
                    </ul>
                </aside>
                <aside class="col-sm-3  col-md-3 white">
                    <h5 class="title">我的账户</h5>
                    <ul class="list-unstyled">
                        <li> <a href="/user/register"> 注册 </a></li>
                        <li> <a href="/userCenter"> 账户设置 </a></li>
                        <li> <a href="/userCenter/myOrders?page=1"> 我的订单 </a></li>
                    </ul>
                </aside>
                <aside class="col-sm-3  col-md-3 white">
                    <h5 class="title">关于</h5>
                    <ul class="list-unstyled">
                        <li> <a href="#"> 网站历史 </a></li>
                        <li> <a href="#"> 如何购买 </a></li>
                        <li> <a href="#"> 配送及支付 </a></li>
                        <li> <a href="#"> 通知 </a></li>
                        <li> <a href="#"> 合作伙伴 </a></li>
                    </ul>
                </aside>
                <aside class="col-sm-3">
                    <article class="white">
                        <h5 class="title">联系我们</h5>
                        <p>
                            <strong>电话: </strong> +123456789 <br>
                            <strong>传真:</strong> +123456789
                        </p>

                        <div class="btn-group white">
                            <a class="btn btn-facebook" title="Facebook" target="_blank" href="#"><i class="fab fa-facebook-f  fa-fw"></i></a>
                            <a class="btn btn-instagram" title="Instagram" target="_blank" href="#"><i class="fab fa-instagram  fa-fw"></i></a>
                            <a class="btn btn-youtube" title="Youtube" target="_blank" href="#"><i class="fab fa-youtube  fa-fw"></i></a>
                            <a class="btn btn-twitter" title="Twitter" target="_blank" href="#"><i class="fab fa-twitter  fa-fw"></i></a>
                        </div>
                    </article>
                </aside>
            </div> <!-- row.// -->
            <br>
        </section>
        <!--<section class="footer-bottom row border-top-white">-->
            <!--<div class="col-sm-6">-->
                <!--<p class="text-white-50"> Made with <3 <br>  by Vosidiy M.</p>-->
            <!--</div>-->
            <!--<div class="col-sm-6">-->
                <!--<p class="text-md-right text-white-50">-->
                    <!--Copyright &copy  <br>-->
                    <!--<a href="http://bootstrap-ecommerce.com" class="text-white-50">Bootstrap-ecommerce UI kit</a>-->
                <!--</p>-->
            <!--</div>-->
        <!--</section> &lt;!&ndash; //footer-top &ndash;&gt;-->
    </div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->


</body>
</html>